<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员账户管理</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
    <b style="color: red; font-size: 20px;">管理员账户列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showAddAdmin">添加管理员</el-button>
    </div>
    <!--
        :data="tableData" 关联vue中的data中的tableData，后台将数据赋值给tableData，然后显示到这里
    -->
    <el-table :data="tableData">
        <el-table-column align="center" type=index label="序号" prop="adminId" prop="password"
                         width="100px"></el-table-column>
        <!--        <el-table-column prop="password" type="hidden" ></el-table-column>-->
        <el-table-column align="center" prop="adminName" label="用户名"></el-table-column>
        <el-table-column align="center" prop="adminRole" label="角色"></el-table-column>
        <el-table-column align="center" prop="faculty.facultyName" prop="faculty.facultyId"
                         label="管理范围"></el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="props">
                <el-button type="warning" @click="showEditAdmin(props.row)" :disabled="props.row.adminName == 'admin'">编辑</el-button>
                <el-button type="danger" @click="deleteAdmin(props.row)" :disabled="props.row.adminName == 'admin'">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
    <!--
       1.:visible.sync="dialogTableVisible4add"  控制弹出框是否显示的 (true显示,false隐藏)
       2.dialogTableVisible4add来自于下面的vue,默认值是false，通过showAddStu函数来修改dialogTableVisible4add的值
   -->
    <el-dialog title="添加管理员" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="adminName">
                <!--双向绑定，在这里输入数据直接将输入的数据添加到下面vue的formData中-->
                <el-input v-model="formData.adminName" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
                <!--双向绑定，在这里输入数据直接将输入的数据添加到下面vue的formData中-->
                <el-input v-model="formData.passWord" style="width: 300px"></el-input>
            </el-form-item>

            <el-form-item label="角色" prop="adminRole">
                <el-select v-model="formData.adminRole" placeholder="请选择角色" style="width: 300px">
                    <el-option
                            v-for="ro in role"
                            :label="ro.label"
                            :value="ro.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理范围" prop="faculty">
                <!--v-model : 双向绑定 -->
                <el-select v-model="formData.faculty" placeholder="请选择管理范围" style="width: 300px">
                    <el-option
                            v-for="fa in faculty"
                            :label="fa.facultyName"
                            :value="fa.facultyId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item align="center">
                <el-button type="primary" @click="addAdmin('addForm')">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>

    <el-dialog title="编辑管理员信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')">
        <el-form :model="editFormData" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="adminName">
                <el-input v-model="editFormData.adminName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="passWord">
                <el-input v-model="editFormData.passWord" placeholder="不修改密码可不填"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="adminRole">
                <el-select v-model="editFormData.adminRole" placeholder="请选择角色" style="width: 300px">
                    <el-option
                            v-for="ro in role"
                            :label="ro.label"
                            :value="ro.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理范围" prop="facultyName">
                <!--v-model : 双向绑定 -->
                <el-select v-model="editFormData.facultyId" placeholder="请选择管理范围" style="width: 300px">
                    <el-option
                            v-for="fa in faculty"
                            :key="fa.facultyId"
                            :label="fa.facultyName"
                            :value="fa.facultyId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="warning" @click="updateAdmin()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData: {},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData: [],//表格数据
            role: [{
                value: '超级',
                label: '超级'
            }, {
                value: '院系',
                label: '院系'
            }],
            faculty: [],
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            rules: {
                adminName: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                passWord: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                adminRole: [
                    {required: true, message: '请选择角色', trigger: 'blur'}
                ],
                faculty: [
                    {required: true, message: '请选择学院', trigger: 'blur'}
                ]
            }
        },
        methods: {
            //改变每页条数时执行的函数
            handleSizeChange(pageSize) {
                //修改分页查询的参数
                this.pagination.pageSize = pageSize;
                //重新执行查询
                this.selectByPage();
            },
            //改变页码时执行的函数
            handleCurrentChange(pageNum) {
                //修改分页查询的参数
                this.pagination.currentPage = pageNum;
                //重新执行查询
                this.selectByPage();
            },

            showAddAdmin() {
                //弹出窗口
                this.dialogTableVisible4add = true;
            },

            resetForm(addForm) {
                //双向绑定，输入的数据都赋值给了formData， 清空formData数据
                this.formData = {};
                //清除表单的校验数据
                this.$refs[addForm].resetFields();
            },

            showEditAdmin(row) {
                //1. 弹出窗口
                this.dialogTableVisible4edit = true;

                //2. 显示表单数据---相当于之前的数据回显
                this.editFormData = {
                    adminId: row.adminId,
                    adminName: row.adminName,
                    passWord: '',
                    password: row.password,
                    adminRole: row.adminRole,
                    facultyId: row.faculty.facultyId,
                    facultyName: row.faculty.facultyName
                }
                console.log(this.editFormData);
            },
            //删除学生
            deleteAdmin(row) {
                let con = window.confirm("确定要删除" + row.adminName + "数据?");
                if (con) {
                    let param = "action=deleteAdmin&adminId=" + row.adminId +
                        "&curPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;

                    axios.post("/EpidemicControlSystem_war_exploded/AdminServlet", param)
                        .then(response => {
                            if (response.data == true) {
                                alert('删除成功');
                                this.selectByPage();
                                // // console.log(resp.data);
                                // //将查询出的数据赋值tableData
                                // this.tableData = response.data.list;
                                //当前页
                                this.pagination.currentPage = response.data.curPage;
                            }
                            // //总条数
                            // this.pagination.total = response.data.count;
                        })
                }
            },
            //修改学生
            updateAdmin() {
                let param = "action=editAdmin&adminName=" + this.editFormData.adminName +
                    "&adminId=" + this.editFormData.adminId + "&adminRole=" + this.editFormData.adminRole +
                    "&faculty=" + this.editFormData.facultyId +
                    "&curPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize +
                    "&passWord=" + this.editFormData.passWord;
                console.log(param);
                axios.post("/EpidemicControlSystem_war_exploded/AdminServlet", param)
                    .then(res => {
                        if (res.data == true) {
                            alert('修改成功');
                            this.selectByPage();
                            //当前页
                            console.log(res.data);
                            this.pagination.currentPage = res.data.curPage;
                            //关闭编辑窗口
                            this.dialogTableVisible4edit = false;
                        } else {
                            alert('修改失败')
                        }
                    });
            },
            //分页查询功能
            selectByPage() {
                //向后台发送请求
                axios.post("/EpidemicControlSystem_war_exploded/AdminServlet",
                    "action=showAdmin&curPage=" + this.pagination.currentPage +
                    "&pageSize=" + this.pagination.pageSize)
                    .then(response => {
                        console.log(response.data);
                        //将查询出的数据赋值给tableData
                        this.tableData = response.data.list;
                        console.log(this.tableData);
                        //总条数
                        this.pagination.total = response.data.count;

                    }),
                    axios.post("/EpidemicControlSystem_war_exploded/AdminServlet",
                        "action=addAdminUi").then(res => {
                        //学院
                        this.faculty = res.data;
                        console.log(res.data)
                    });
            },
            //添加管理员功能
            addAdmin(addForm) {
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
                        let param = "adminName=" + this.formData.adminName + "&adminRole=" + this.formData.adminRole +
                            "&passWord=" + this.formData.passWord + "&faculty=" + this.formData.faculty +
                            "&curPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
                        console.log(param)

                        axios.post("/EpidemicControlSystem_war_exploded/AdminServlet", "action=addAdmin&" + param)
                            .then(resp => {
                                console.log(resp.data);
                                if (resp.data == true) {
                                    alert('添加成功');
                                    axios.post("/EpidemicControlSystem_war_exploded/AdminServlet",
                                        "action=showAdmin&curPage=" + this.pagination.currentPage +
                                        "&pageSize=" + this.pagination.pageSize)
                                        .then(response => {
                                            console.log(response.data)
                                            //将查询出的数据赋值给tableData
                                            this.tableData = response.data.list;
                                            //总条数
                                            this.pagination.total = response.data.count;
                                        });
                                    //关闭添加窗口
                                    this.dialogTableVisible4add = false;
                                } else {
                                    alert('添加失败')
                                }
                                // 页面需要更新
                            });
                    } else {
                        alert('出错');
                    }
                });
            }
        },
        created() {
            //调用分页查询功能
            this.selectByPage();
        }
    });
</script>
</html>